<template>
  <el-container style="background-color: #f0f3f4">
    <el-header style="background-color: #ffff" v-show="isShowBtn == 1">
      <tool-bar :pageFrom="pageFrom" ref="toolbar"></tool-bar>
    </el-header>
    <el-main justify="center" align="middle" class="el-main">
      <!--主要区域容器-->
      <div v-if="showFrmType == 0">
        <FrmFool
          :PFrmData="flowData"
          :isReadonlyExt="isReadonlyExt"
          :isReadonly="isReadonly"
          :mainData="mainData"
          ref="FrmFool"
        ></FrmFool>
      </div>
      <div v-else-if="showFrmType == 1">
        <FrmDevelop
          :PFrmData="flowData"
          :isReadonlyExt="isReadonlyExt"
          :isReadonly="isReadonly"
          :mainData="mainData"
          ref="FrmDevelop"
        ></FrmDevelop>
      </div>
      <div v-else>
        <FrmTree></FrmTree>
      </div>
      <!--<el-form v-if="node.FormType===0 || node.FormType===10" id="FrmFool">
          <div v-for="gf in groupFields" v-bind:key="gf.OID">
              <div style="text-align: left">{{gf.Lab}}</div>npm
              <el-divider></el-divider>
              <template v-if="gf.CtrlType == '' || gf.CtrlType == null">
                  <MapAttrForm
                          :mainData="gf.mainData"
                          :mapAttrs="gf.MapAttrs"
                          @on-mainData-change="ChangeMainData">
                  </MapAttrForm>
              </template>
              <template v-if="gf.CtrlType=='Ath'">
                 <Ath></Ath>
              </template>
          </div>
      </el-form>
       <el-form v-else-if="node.FormType===1" id="FrmFree">
              自由表单
      </el-form>
       <el-form v-else-if="node.FormType===5" >
              树形表单
      </el-form>
       <el-form v-if="node.FormType===12" id="FrmDevelop"  v-html="developHtml" :style="{width:widthStyle}" style="background-color:#ffff;margin:0px auto;padding:5px 10px">
              开发者表单
              {{developHtml}}
      </el-form>
      <div id="divinfo" v-show="isShowDiv">
      </div>-->
    </el-main>
  </el-container>
</template>
<script>
import { FlowDevModel } from "@/api/enums.js";
import ToolBar from "./components/tool-bar.vue";
import FrmFool from "./ccform/FrmFool.vue";
import FrmDevelop from "./ccform/FrmDevelop.vue";
import FrmTree from "./ccform/FrmTree.vue";

export default {
  components: {
    ToolBar,
    FrmFool,
    FrmDevelop,
    FrmTree,
  },
  data() {
    return {
      width: "900px",
      params: {}, //参数
      webUser: {}, //人员信息
      node: {}, //节点属性信息
      flow: {}, //流程属性信息
      mapData: {}, //表单属性
      flowData: {}, //表单的所有数据
      showFrmType: 0, // 表单类型   0傻瓜表单 1开发者表单 2树形结构的表单
      mainData: {}, //表单数据
      developHtml: "",
      isShowDiv: false,
      isShowBtn: 1,
      pageFrom: "MyFlow", //流程处理器页面
      isReadonly: 0,
      isReadonlyExt: 0,
    };
  },

  computed: {
    widthStyle: function () {
      return this.flowData.Sys_MapData[0].FrmW + "px";
    },
  },
  created() {
    this.params = this.$route.query;
    this.webUser = this.$store.getters.getWebUser;
    //初始化按钮
    this.isShowBtn = this.params.IsShowBtn;
    //获取表单数据
    this.GenerWorkNode();
    this.mainData = this.flowData.MainTable[0];
    this.mapAttrs = this.flowData.Sys_MapAttr;
    this.mapExts = this.flowData.Sys_MapExt;
  },
  methods: {
    GenerWorkNode: function () {
      //获取流程数据
      let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_MyFlow");
      handler.AddJson(this.params);
      let data = handler.DoMethodReturnString("GenerWorkNode");
      if (data.indexOf("err@") == 0) {
        console.log(data);
        this.$alert("获取表单数据失败,请查看控制台日志,或者联系管理员.", {
          dangerouslyUseHTMLString: true,
        });
        return;
      }
      try {
        this.flowData = JSON.parse(data);
      } catch (err) {
        console.log(data);
        this.$alert(
          " GenerWorkNode转换JSON失败,请查看控制台日志,或者联系管理员.",
          {
            dangerouslyUseHTMLString: true,
          }
        );
        return;
      }
      //消息提醒
      let alertMsgEle = "";
      let title = "";
      let count = 1;
      this.flowData.AlertMsg.forEach((alertMsg) => {
        let _html = "<div>";
        _html +=
          '<span class="titleAlertSpan"> ' +
          count++ +
          "&nbsp;&nbsp;&nbsp;" +
          alertMsg.Title +
          "</span>";
        _html += "<div>" + alertMsg.Msg + "</div>";
        _html += "</div>";
        alertMsgEle += _html;
        title = alertMsg.Title;
      });

      if (this.flowData.AlertMsg.length != 0) {
        this.$alert(alertMsgEle, title, {
          confirmButtonText: "确定",
          dangerouslyUseHTMLString: true,
        });
      }
      this.InitData();
    },

    InitData: function () {
      //初始化数据
      //节点属性
      this.node =
        this.flowData.WF_Node != null && this.flowData.WF_Node != undefined
          ? this.flowData.WF_Node[0]
          : null;
      //流程属性
      this.flow =
        this.flowData.WF_Flow != null && this.flowData.WF_Flow != undefined
          ? this.flowData.WF_Flow[0]
          : null;
      //表单属性
      this.mapData = this.flowData.Sys_MapData[0];
      //标题
      this.title = this.node != null ? this.node.Name : this.mapData.Name;
      //表单数据
      this.mainData = this.flowData.MainTable[0];
      let frmNode =
        this.flowData.WF_FrmNode != null &&
        this.flowData.WF_FrmNode != undefined
          ? this.flowData.WF_FrmNode[0]
          : null;
      //解析表单的类型
      let flowDevModel = this.GetPara(this.flow.AtPara, "FlowDevModel");
      flowDevModel =
        flowDevModel == null || flowDevModel == undefined || flowDevModel == ""
          ? "0"
          : flowDevModel;
      if (
        (flowDevModel == 1 || this.node.FormType == 11) &&
        frmNode != null &&
        frmNode.FrmSln == 1
      )
        this.isReadonlyExt = 1;

      //根据流程设计模式解析
      switch (parseInt(flowDevModel)) {
        case FlowDevModel.Prefessional: //专业模式
          //根据节点的表单方案解析
          switch (parseInt(this.node.FormType)) {
            case 0: //傻瓜表单
            case 10: //累加表单
              this.showFrmType = 0;
              break;
            case 12: //开发者表单
              this.showFrmType = 1;
              break;
            case 5: //树形表单
              this.showFrmType = 2;
              break;
            case 11: //表单库单表单
              if (this.mapData.FrmType == 0)
                //傻瓜表单
                this.showFrmType = 0;
              if (this.mapData.FrmType == 8)
                //开发者表单
                this.showFrmType = 1;

              break;
            default:
              this.$message.error(
                "节点表单方案:[" +
                  this.node.FormType +
                  "]不存在或者暂未解析，请联系管理员"
              );
              break;
          }
          break;
        case FlowDevModel.JiJian: //极简模式(傻瓜表单)
          if (this.mapData.FrmType == 0)
            //傻瓜表单
            this.showFrmType = 0;
          if (this.mapData.FrmType == 8)
            //开发者表单
            this.showFrmType = 1;
          break;
        case FlowDevModel.FoolTruck: //累加模式
          this.showFrmType = 0; //傻瓜表单.
          break;
        case FlowDevModel.RefOneFrmTree: //表单库单表单
          if (frmNode != null && frmNode != undefined) {
            frmNode = frmNode[0];
            if (frmNode.FrmType == 0)
              //傻瓜表单
              this.showFrmType = 0;
            if (frmNode.FrmType == 8)
              //开发者表单
              this.showFrmType = 1;
          }
          break;
        case FlowDevModel.FrmTree: //表单库多表单
          this.showFrmType = 2;
          break;
        default:
          this.$message.error(
            "流程设计模式:[" +
              this.flow.FlowDevModel +
              "]不存在或者暂未解析，请联系管理员"
          );
          break;
      }
    },

    validateForm() {
      return this.$refs.FrmFool.validateForm();
    },

    Save(isSend) {
      //只保存数据
      //保存从表数据
      //校验附件上传的数据
      //审核组件
      if (!isSend) {
        //审核组件可以不保存
      }
      if (this.showFrmType === 0 && !this.validateForm()) {
        return false;
      }
      //保存
      let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_MyFlow");
      for (let key in this.mainData) {
        let val = this.mainData[key];
        if (val instanceof Array) {
          handler.AddPara(key, val.join(","));
        } else handler.AddPara(key, val);
      }
      handler.AddJson(this.params);
      let data = handler.DoMethodReturnString("Save"); //执行保存方法.
      if (!isSend) {
        this.$message.success(data);
      }
    },
  },
  mounted() {
    //开发者表单，加载完页面元素后解析页面
    //if(this.node.FormType === 12){
    //    ParseDevelopFrm(this.$route.params,this.flowData);
    //}
    this.$refs.toolbar.HelpAlert(this.node.HelpRole);
    document.querySelector(".el-main").style.padding = 0;
    document.querySelector(".el-header").style.height = "";
  },
  beforeDestroy() {
    document.querySelector(".el-main").style.padding = "20px";
    document.querySelector(".el-header").style.height = "60px";
  },
};
</script>
<style scoped>
/*
	找到html标签、body标签，和挂载的标签
	都给他们统一设置样式
*/
html,
body,
#app,
.el-container {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  height: 100%;
}

.el-header {
  width: 100%;
  height: 56px !important;
  line-height: 56px;
  padding: 0 20px 0 44px;
  background: #ffffff;
  box-shadow: 0px 4px 6px 0px rgba(231, 237, 249, 1);
  box-sizing: border-box;
  top: 0;
}

:root >>> .el-divider--horizontal {
  margin: 12px 0px;
}

.el-main {
  padding: 0 !important;
}
</style>
